<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
</head>
<body>
<div id="app">
	<p>
		全选：
	</p>
	<input type="checkbox" id="checkbox" v-model="checked" @change="changeAllChecked()">
	<label for="checkbox">{{checked}}</label>
	<p>多个复选框：</p>

	<input type="checkbox" id="runoob" value="Runoob" v-model="checkedNames">
	<label for="runoob">Runoob</label>

	<input type="checkbox" id="google" value="Google" v-model="checkedNames">
	<label for="google">Google</label>

	<input type="checkbox" id="taobao" value="Taobao" v-model="checkedNames">
	<label for="taobao">taobao</label>
	<br>
	<span>选择的值为:{{checkedNames}}</span>
</div>



<script>
        new Vue({
	        el: '#app',
	        data: {
		        checked: false,
		        checkedNames: [],
		        checkedArr: ["Runoob", "Taobao", "Google"]
	        },
	        methods: {
		        changeAllChecked: function() {
                    if (this.checked) {//初始化为false，
                        this.checkedNames = this.checkedArr//当全选框被选中时把复选框的所有选项都选中
                    } else{//初始化清空checkedNames这样多个复选框的初始化状态为不选中
                        this.checkedNames = []
                    }
                }
            },
            watch: {
                "checkedNames": function() {
                    if (this.checkedNames.length == this.checkedArr.length) {//这种状态表示所有复选框都是选中状态
                        this.checked = true//此时全选框为选中
                    } else {//否则全选框为不选中状态
                        this.checked = false
                    }
                }
	        }
        })
</script>
</body>
</html>
